/**
  * @Description: WoShop商城
  * @Author: 梧桐
  * @Copyright: 武汉一一零七科技有限公司©版权所有
  * @Link: www.s1107.com
  * @Contact: QQ:2487937004
  */
<template>
  <view class="fightgroup" v-if="pageShow">
    <view class="fightgroup-header">
      <image :src="info.goodsinfo.thumb_url" />
      <view class="fightgroup-header__right">
        <h2>{{ info.goodsinfo.goods_name }}</h2>
        <i>{{ info.goodsinfo.goods_attr_str }}</i>
        <u-tag plain type="warning" :text="info.goodsinfo.pin_num+'人团'" size="mini"></u-tag>
          <p class="price"><span class="rmbSymbol">¥</span>{{ info.goodsinfo.price }}</p>
     
      </view>
    </view>
    <view class="fightgroup-content">
      <view class="fightgroup-content__user">
        <view class="userlist" v-for="(item, index) in info.member_assem"  :key="index">
          <image  :src="item.headimgurl" />
          <view v-if="item.pin_type === 1">团长:{{info.member_assem[0].user_name}}</view>
        </view>
        <u-tag plain type="success" shape="circle" :text="info.pininfo"></u-tag>
      </view>
      <view v-if="info.zhuangtai === 1">
        <p class="tip-content" v-if="info.zhuangtai === 1">{{ info.tuan_name }}</p>
        <view class="countdown">
          <uni-countdown
            :day="day"
            :hour="hours"
            :second="second"
            splitor-color="#FF7900"
            background-color="#FF8300"
            border-color="#FF8300"
            color="#fff"
            :minute="minute">
          </uni-countdown>
          <view class="fightgroup-btn" @click="toIntive">邀请好友</view>
        </view>
      </view>
      <view v-if="info.zhuangtai === 2">
        <p v-if="info.zhuangtai === 1">{{ info.tuan_name }}</p>
        <view class="fightgroup-btn" @click="getnav('/pagesC/homeSon/orderDetails?order_num=' + info.order_num)">查看订单</view>
      </view>
      <view v-if="info.zhuangtai ===3">
        <p v-if="info.zhuangtai === 1">{{ info.tuan_name }}</p>
        <view class="fightgroup-btn" @click="getnav('/pagesC/homeSon/orderDetails?order_num=' + info.order_num)">查看订单</view>
      </view>
      <view class="fight-group__step--list">
        <view class="fight-group__step--item step-item__active">
            <image src="../../static/images/img/fight-group.png" />
            <text>发起拼团</text>
        </view>
        <view class="fight-group__step--item" :class="[info.zhuangtai > 0 ? 'step-item__active' : '']">
            <image :src="info.zhuangtai > 0 ? '../../static/images/img/fight-group.png' : '../../static/images/img/fight-group-disable.png'" />
            <text>邀请好友参团</text>
        </view>
        <view class="fight-group__step--item" :class="[info.zhuangtai == 2 ? 'step-item__active' : '']">
            <image :src="info.zhuangtai == 2 ? '../../static/images/img/fight-group.png' : '../../static/images/img/fight-group-disable.png'" />
            <text>拼团成功</text>
          
        </view>
      </view>
      <view class="fightgroup-footer">
        <span>支付开团并邀请好友参团,24小时内人数不足自动退款</span>
     
      </view>
    </view>
    
    <u-popup v-model="isShowInvite" mode="center" width="80%" border-radius="12">
      <div class="inviteWrap">
        <u-icon name="weixin-circle-fill" color="#1BD76D" size="68" @click="shareFriends"></u-icon>
        <u-icon name="attach" color="#333" size="68" @click="copyUrl"></u-icon>
      </div>
    </u-popup>
    
  </view>
</template>

<script>
  import uniCountdown from "../../components/uni-countdown.vue";
  import {DEVELOPMENTAPI} from "../../config";
  
  export default {
    data () {
      return {
        info: {},
        goodsinfo: {},
        userList: [],
        pageShow: false,
        hours: 0,
        day: 0,
        minute: 0,
        second: 0,
	    	order_num: '',
        isShowInvite:false
      }
    },

    components: {
      uniCountdown
    },

    onLoad (option) {
	  this.order_num = option.order_num;
      this.getDetail()
    },

    methods: {
      getDetail () {
        this.$loading()
        this.$http.getPinTuanDetail({
          order_num: this.order_num
        }).then(res => {
          if (res.status === 200) {
            this.formatTime(res.data.timeout - res.data.nowtime)
            this.info = res.data
			console.log(this.info)
            uni.setNavigationBarTitle({
              title: res.data.pininfo
            })
            this.pageShow = true
          }
        })
      },
     shareFriends(){
        const BASEURL =  uni.getStorageSync('baseUrl')
        const GOODSINFO = this.info.goodsinfo
        uni.share({
          provider: "weixin",
          scene: "WXSceneSession",
          type: 0,
          href: `${BASEURL}h5/#/pagesC/homeSon/goodsDetails?id=${GOODSINFO.goods_id}&pin_id=${this.info.pin_id}`,
          title: `参与${this.info.member_assem[0].user_name}发起的${GOODSINFO.goods_name }团购`,
          summary: "拼团邀请",
          imageUrl: GOODSINFO.thumb_url,
          success: res=>{
              console.log("success:" + JSON.stringify(res));
             this.$toast('分享成功')
          },
          fail: function (err) {
            console.log("fail:" + JSON.stringify(err));
          }
        });
      },
	  copyUrl(){
		  const BASEURL =  uni.getStorageSync('baseUrl');
		  const GOODSINFO = this.info.goodsinfo;
		  $utils.copy(`${BASEURL}h5/#/pagesC/homeSon/goodsDetails?id=${GOODSINFO.goods_id}&pin_id=${this.info.pin_id}`);
	  },
      
      toIntive () {
        this.isShowInvite = true
        // this.getnav(`/pagesC/homeSon/invite?pin_id=${this.info.pin_id}&tuan_id=${this.info.tuan_id}`)
      },

      formatTime (time) {
        let day = 0
        let hours = 0
        let minute = 0
        let second = 0
        if (time > 60 * 60 * 24) {
          day = Math.floor(time / (60 * 60 * 24))
        }

        if ((time - day * 60 * 60 * 24) > 60 * 60) {
          hours =  Math.floor((time - day * 60 * 60 * 24) / (60 * 60))
        }

        if ((time - day * 60 * 60 * 24 - hours * 60 * 60) > 60) {
          minute =  Math.floor((time - day * 60 * 60 * 24 - hours * 60 * 60) / 60)
        }

        if ((time - day * 60 * 60 * 24 - hours * 60 * 60 - minute * 60) > 0) {
          second =  time - day * 60 * 60 * 24 - hours * 60 * 60 - minute * 60
        }
        this.day = day
        this.hours = hours
        this.minute = minute
        this.second = second
      }
    }
  }
</script>

<style lang="scss" scoped>
  page, .fightgroup {
    height: 100%;
    background: #fff;
  }
  .step-item__active {
    color: #FA3F3F!important;
  }
  .fightgroup-header {
    display: flex;
    align-items: center;
    height: 300upx;
    padding: 0 64upx 0 26upx;
    border-bottom: 26upx solid #f4f4f4;
    background: #fff;
    image {
      width: 210upx;
      height: 210upx;
      margin-right: 30upx;
      border-radius: 10upx;
    }

    .fightgroup-header__right--bottom {
      padding-top: 10upx;
      .price{
        font-size: 32upx;
        font-weight: 600;
        color: #f7544e;
      }
      span {
        padding-right: 12upx;
        color: #F7544E;
        font-size: 30upx;
      }

      i {
        font-size: 24upx;
        font-style: normal;
        color: #999999;
        text-decoration: line-throug;
      }
    }

    .fightgroup-header__right {
      flex: 1;

      & > span {
        height: 34upx;
        line-height: 34upx;
        margin-bottom: 34upx;
        padding: 0 10upx;
        font-size: 24upx;
        color: #E46800;
        border-radius: 4upx;
        border: 1upx solid rgba(229,109,10,1);
      }

      i {
        display: block;
        margin-bottom: 10upx;
        color: #999;
        font-size: 24upx;
      }

      h2 {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        color: #333;
        font-size: 28upx;
        line-height: 1.4;
        margin-bottom: 8upx;
      }
    }
  }

  .fightgroup-btn {
    width: 578upx;
    height: 88upx;
    line-height: 88upx;
    margin: 58upx auto 85upx auto;
    text-align: center;
    font-size: 30upx;
    color: #fff;
    background: rgba(247,84,78,1);
    border-radius: 47upx;
  }

  .fightgroup-content {
    padding-top: 40upx;

    .tip-content {
      text-align: center;
      margin-bottom: 20upx;
    }

    & > p {
      color: #999;
      font-size: 28upx;
      text-align: center;
      margin-bottom: 11upx;
    }

    .fightgroup-content__user {
      margin-bottom: 27upx;
      text-align: center;
      image {
        width: 104upx;
        height: 104upx;
        margin-left: -22upx;
        border-radius: 50%;
      }
    }

    .countdown {
      text-align: center;
    }
  }

  .fight-group__step--list {
    display: flex;
    .step-item__active {
      color: #FF8300!important;
    }

    .fight-group__step--item {
      flex: 1;
      color: #999999;
      font-size: 24upx;
      text-align: center;

      &:last-child image::after {
          display: none;
      }
      image {
          position: relative;
          z-index: 11;
          width: 40upx;
          height: 40upx;
          overflow: inherit!important;
          margin-bottom: 24upx;

          &::after {
              position: absolute;
              left: 40upx;
              top: 50%;
              width: 239upx;
              height: 2upx;
              background: #E8E8E8;
              content: '';
              transform: translateY(-50%);
          }
      }
      text {
          display: block;
      }
    }
  }

  .fightgroup-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 40upx;
    padding: 0 24upx;
    color: #999999;
    font-size: 24upx;
  }
  .inviteWrap{
    padding: 30upx;
  }
</style>
